<template>
  <div id="app">
    <button @click="addNum">按下加一</button>
    <button @click="fbnq">斐波那契数列</button>
    <button @click="empty">清空</button>
    <button @click="fn1">输出斐波那契数列</button>
    <div>{{num}}</div>
    <my-test :myarr="arr" ref="child" @getMsg="getData"></my-test>
    <p>子组件传过来的值是：{{son}}</p>
  </div>
</template>

<script>
import MyTest from "./components/MyTest.vue"
export default {
  components: {
    // '模板中使用的名称':组件的文件名
    'my-test': MyTest,
  },
  name: 'App',
  data () {
    return {
      arr: [0, 1],
      num: 0,
      timer: null,

      // 子组件传过来的值
      son: null
    }
  },
  mounted () {
    this.$refs.child.getMsg(this.arr)
  },
  methods: {
    addNum () {
      this.num++
    },
    // 斐波那契数列
    fbnq () {
      this.arr.push(this.arr[this.arr.length - 1] + this.arr[this.arr.length - 2])
      console.log(this.arr);
    },
    // 实现斐波那契数列
    fn1 () {
      // 第一种  定时器方式
      // this.timer = setInterval(() => {
      //   this.arr.push(this.arr[this.arr.length - 1] + this.arr[this.arr.length - 2])
      //   console.log(this.arr);
      // }, 1000)

      // 第二种  循环语句实现
      // while (this.arr.length < 10) {
      //   this.arr.push(this.arr[this.arr.length - 1] + this.arr[this.arr.length - 2])
      //   console.log(this.arr);
      // }

      // 第三种  纯递归
      this.arr.push(this.arr[this.arr.length - 1] + this.arr[this.arr.length - 2])
      console.log(this.arr);
      if (this.arr.length >= 10) return
      this.fn1()
    },
    // 清空
    empty () {
      clearInterval(this.timer)
      this.arr = [0, 1]
      this.num = 0
    },
    getData (data) {
      this.son = data
    }
  }
}
</script>

<style>
</style>
